<template>
  <div class="seismic_container">
    <div class="card-title">设备总览</div>
    <div class="content">
      <div class="tab">
        <div class="tab_item">
          <div class="tab_item_top">
            <div class="left"></div>
            <div class="right">
              <div>{{ typeData[0] ? typeData[0].model : '' }}</div>
              <div class="value">
                {{ typeData[0] ? typeData[0].modelCount : '' }}
              </div>
            </div>
          </div>
          <div class="tab_item_bottom">
            {{
              typeData[0]
                ? typeData[0].modelCount == 0
                  ? 0
                  : ((typeData[0].modelCount * 100) / typeCount).toFixed(2)
                : ''
            }}%
          </div>
        </div>
        <div class="tab_item right">
          <div class="tab_item_top">
            <div class="left"></div>
            <div class="right">
              <div>{{ typeData[1] ? typeData[1].model : '' }}</div>
              <div class="value">
                {{ typeData[1] ? typeData[1].modelCount : '' }}
              </div>
            </div>
          </div>
          <div class="tab_item_bottom">
            {{
              typeData[1]
                ? typeData[1].modelCount == 0
                  ? 0
                  : ((typeData[1].modelCount * 100) / typeCount).toFixed(2)
                : ''
            }}%
          </div>
        </div>
      </div>
      <div id="chart-model" ref="type"></div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
// echarts theme
import { getDeviceModel } from '@/api/home';

const props = defineProps({
  typeData: {
    type: Object,
    default: () => {},
  },
  typeCount: {
    type: Number,
    default: 0,
  },
});

const dataInfo: any = ref([]);
const indicatorData: any = ref([]);
const getDeviceType = async () => {
  const res: any = await getDeviceModel();
  if (res.code == 200) {
    dataInfo.value = [];

    res.data.forEach((item: any) => {
      indicatorData.value.push({
        name: item.model,
        max: item.modelCount,
      });
      dataInfo.value.push(item.modelCount);
    });
    if (dataInfo.value.length > 0) {
      init(dataInfo.value);
    }
  }
};
getDeviceType();
const init = (data: any) => {
  let dom = echarts.init(document.getElementById('chart-model'));
  function contains(arr: any, val: any) {
    var i = arr.length;
    while (i--) {
      if (arr[i].name === val) {
        return i;
      }
    }
    return false;
  }
  let option = {
    textStyle: {
      // 全局字体样式
      color: '#000',
      fontSize: 14,
    },
    tooltip: {
      show: false,
      // 提示框组件
      trigger: 'item', // 触发类型 可选为：'axis' | 'item' | 'none'
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
        shadowStyle: {
          color: 'rgba(204, 214, 235, 0.247059)',
        },
      },
    },
    grid: {
      top: '45%',
      left: '30%',
      right: '30%',
      bottom: '30%',
    },
    radar: {
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#fff',
          fontSize: 16,
        },
        rich: {
          a: {
            fontSize: 14,
            color: '#040C14',
            padding: [0, 0, 20, 0],
          },
          b: {
            fontSize: 16,
            fontWeight: 'bolder',
            color: '#040C14',
          },
        },
        formatter: (a: any) => {
          let i = contains(indicatorData.value, a); // 处理对应要显示的样式
          return `{a| ${a}}\n{b| ${dataInfo.value[i]}}`;
        },
      },
      splitNumber: 3,
      radius: 60,
      startAngle: 0,
      splitArea: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: ['rgba(166, 215, 255, .5)'],
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(166, 215, 255, .5)',
        },
      },
      indicator: indicatorData.value,
    },
    series: [
      {
        type: 'radar',
        symbol: 'circle', //none为不显示
        areaStyle: {
          color: '#007ADF',
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#007ADF',
                },
                {
                  offset: 1,
                  color: '#00ECBC',
                },
              ],
              false,
            ),
            shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
          opacity: 0.4,
        },
        itemStyle: {
          lineStyle: {
            width: 2,
          },
        },
        emphasis: {
          areaStyle: {
            opacity: 0.8,
          },
        },
        label: {
          show: false, // 显示标签
          fontSize: 14,
          fontWeight: 'bolder',
          color: '#000',
        },
        data: [
          {
            value: dataInfo.value,
          },
        ],
      },
    ],
  };

  dom.setOption(option);
  addEventListener('resize', function () {
    dom.resize();
  });
};
</script>
<style lang="scss" scoped>
@use '../style.scss';
.content {
  width: 100%;
  height: calc(100% - 4vh);
  display: flex;
  flex-direction: column;
  #chart-model {
    flex: 3;
  }
  .tab {
    flex: 1;
    display: flex;
    padding: 1vh 2vh;
    &_item {
      flex: 1;
      padding: 1vh 2vh;
      display: flex;
      flex-direction: column;
      &_top {
        flex: 1.5;
        border-bottom: 2px dashed #5a95c3;
        display: flex;
        // justify-content: space-between;
        .left {
          width: 4.5vh;
          height: 4.5vh;
          background: url('@/assets/images/left_icon.png') no-repeat center;
          background-size: 100% 100%;
        }
        .right {
          margin-left: 1.5vh;
          font-size: 1.2vh;
          .value {
            font-size: 2vh;
            font-weight: 700;
          }
        }
      }
      &.right {
        .tab_item_top {
          border-bottom: 2px dashed #5ac39d;
        }
        .left {
          background: url('@/assets/images/right_icon.png') no-repeat center;
          background-size: 100% 100%;
        }
      }
      &_bottom {
        flex: 1;
        font-size: 2vh;
        line-height: 3vh;
        font-weight: 700;
        text-align: center;
      }
      &:first-child {
        margin-right: 1vh;
        background: url('@/assets/images/left_bg.png') no-repeat center;
        background-size: 100% 100%;
      }
      &:last-child {
        background: url('@/assets/images/right_bg.png') no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
